<template>
  <div class="screen">
    <mt-header title="注册" class="title">
      <router-link to="/login" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="littleInterval"></div>
      <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phoneNumber"><mt-button type="default" size="small" @click="getVerificationCode" >获取验证码</mt-button></mt-field>
      <mt-field label="验证码" placeholder="请输入验证码" v-model="checkNumber"></mt-field>
      <mt-field label="密码" placeholder="请输入密码" v-model="password" type="password"></mt-field>
      <mt-field label="重复密码" placeholder="请重复输入密码" v-model="repeatPassword" type="password"></mt-field>
      <div data-v-0956f19a="" class="mint-cell mint-field">
        <div class="mint-cell-left"></div>
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">注册类型</span>
          </div>
          <div class="mint-cell-value">
            <input type="radio" name="userType" value="0" id="s_user_type" v-model="userType"/><label for="s_user_type" class="type_lable">学生用户</label>
            <input type="radio" name="userType" value="1" id="e_user_type" style="margin-left: 1rem" v-model="userType"/><label for="e_user_type" class="type_lable">企业用户</label>
            <div class="mint-field-clear" style="display: none;">
              <i class="mintui mintui-field-error"></i>
            </div>
            <span class="mint-field-state is-default">
              <i class="mintui mintui-field-default"></i>
            </span>
            <div class="mint-field-other"></div>
          </div>
        </div>
        <div class="mint-cell-right"></div>
      </div>
      <div class="littleInterval"></div>
      <mt-button type="default" size="large" @click.native="register">注册</mt-button>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import axios from  'axios'
  export default{
    name:'Register',
    data(){
      return {
        phoneNumber: '', //手机号码
        checkNumber: '', //验证码
        password:'',//密码
        repeatPassword:'', //验证密码
        userType:''

      }
    },
    methods:{
      register() {//注册账号
          if(this.phoneNumber.trim()==""){
            Toast('手机号不能为空');
            return;
          }
          if(this.checkNumber.trim()==""){
            Toast('验证码不能为空');
            return;
          }
        if(this.password.trim()==""){
          Toast('密码不能为空');
          return;
        }
        if(this.repeatPassword.trim()==""){
          Toast('重复密码不能为空');
          return;
        }
        if(this.password.trim()!=this.repeatPassword.trim()){
          Toast('两次输入的密码不一样');
          return;
        }
        if(this.userType.trim()==""){
          Toast('注册类型不能为空！');
          return;
        }
        let params = new URLSearchParams();
        params.append("phoneNumber",this.phoneNumber);
        params.append( "checkNumber", this.checkNumber);
        params.append("password",this.password);
        params.append("userType",this.userType);
        axios.post('/api/common/register',params).then(res=>{
          //成功之后跳转到完善信息页面
          if(res.data.code==200){
            this.$router.push({
              name:"Login"
            });
          }else{
            Toast(res.data.message);
          }
        });
      },
      getVerificationCode(){ //获取验证码
        if(this.phoneNumber==''){
          Toast('请输入手机号！');
          return;
        }
        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if(!myreg.test(this.phoneNumber))
        {
          Toast('请输入有效的手机号码！');
          return false;
        }

        //axios:=>函数的this作用于是函数外的对象   function()函数的this作用域是函数本身
        let params = new URLSearchParams();
        params.append("phoneNumber",this.phoneNumber);
        axios.post('/api/common/getVerificationCode',params).then(res=>{
          this.checkNumber=res.data.data.verificationCode;
        }).catch(error=>{
          Toast('获取验证码失败!');
        })
      }
    }
  }
</script>

<style type="text/css" scoped>
  .littleInterval{
    height: 1rem;
    background-color: rgba(169, 169, 169, 0.08);
  }
  .type_lable{
    color: gray;
    font-weight: lighter;
    margin-top: 0.5rem;
  }
</style>
